<html>
<head>
    <!-- start: Meta -->
    <meta charset="utf-8">
    <title>后台管理系统</title>
    <meta name="description" content="GM 后台管理系统">
    <meta name="author" content="">
    <meta name="keyword" content="">
    <!-- end: Meta -->

    <!-- start: Mobile Specific -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- end: Mobile Specific -->

    <!-- start: CSS -->
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
    <link id="base-style" href="css/login.css" rel="stylesheet">
    <link id="base-style-responsive" href="css/style-responsive.css" rel="stylesheet">
    <!-- end: CSS -->


    <!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <link id="ie-style" href="css/ie.css" rel="stylesheet">
    <![endif]-->

    <!--[if IE 9]>
    <link id="ie9style" href="css/ie9.css" rel="stylesheet">
    <![endif]-->

    <!-- start: Favicon -->
    <link rel="shortcut icon" href="img/favicon.ico">
    <!-- end: Favicon -->

    <style type="text/css">
        body { background: url(img/bg-login.jpg) !important; }
    </style>
</head>
<body>
<div class="container-fluid-full">
    <div class="row-fluid">

        <div class="row-fluid">
            <div class="login-box">
                <h2>登录</h2>
                <form id="loginForm" action="user/login.do" method="post">
                    <fieldset>

                        <div class="form-group" title="账号">
                            <input class="form-control" name="username" id="username" type="text" placeholder="请输入账号"/>
                        </div>

                        <div class="form-group" title="密码">
                            <input class="form-control" name="password" id="password" type="password" placeholder="请输入密码"/>
                        </div>

                        <label class="remember" for="remember">
                            <input type="checkbox" id="remember" /> 记住账号?
                        </label>
                        <label for="errorInfo">
                            <font color="red" id="errorInfo"></font>
                        </label>

                        <div class="button-login">
                            <button type="submit" class="btn btn-primary">登录</button>
                        </div>

                    </fieldset>
                </form>
                <hr>
                <h3>忘记密码?</h3>
                <p>
                    <a href="#">点我</a> ,帮你找回密码.
                </p>
            </div>
        </div>

    </div>

</div>

<!-- start: JavaScript-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery-migrate-1.0.0.min.js"></script>

<script src="js/jquery-ui-1.10.0.custom.min.js"></script>

<script src="js/jquery.ui.touch-punch.js"></script>

<script src="js/modernizr.js"></script>

<script src="js/bootstrap.min.js"></script>

<script src="js/jquery.cookie.js"></script>

<script src="js/jquery.uniform.min.js"></script>
<script src="js/bootstrap-validator/bootstrapValidator.min.js"></script>
<script src="js/common.js"></script>


<!-- end: JavaScript-->
<script>
    $(function(){

        $("input:checkbox").uniform();

        var remberMe = $.cookie('gmRememberMe');
        if(remberMe == 'true'){
            $.uniform.update($("#remember").attr("checked", true));
            var userName = $.cookie('gmSysUserName');
            if(userName !== null && userName !== undefined){
                $('#username').val(userName)
            }
        }

        $('#loginForm')
                .bootstrapValidator({
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        username: {
                            validators: {
                                notEmpty: {
                                    message: '登入名不能为空'
                                },
                                stringLength: {
                                    min: 5,
                                    max: 12,
                                    message: '登入名长度5到12之间'
                                }
                            }
                        },
                        password: {
                            validators: {
                                notEmpty: {
                                    message: '密码不能为空'
                                },
                                stringLength: {
                                    min: 6,
                                    max: 12,
                                    message: '密码长度不能小于6位'
                                }
                            }
                        }
                    }
                })
                .on('success.form.bv', function(e) {
                    // Prevent form submission
                    e.preventDefault();

                    var $form = $(e.target);

                    //Use Ajax to submit form data
                    ajaxParam($form.attr('action'), $form.serialize(), 10000, 'POST', 'json', doSuccess);

                    function doSuccess(res) {
                        if(res.status == 100){
                            $('#errorInfo').html('');
                            //记住用户名密码
                            if($("#remember").prop("checked")){
                                var username = $("#username").val();
                                $.cookie("gmRememberMe", "true", { expires: 7 }); //存储一个带7天期限的cookie
                                $.cookie("gmSysUserName", username, { expires: 7 });
                            }else{
                                $.cookie("gmRememberMe", "false", { expire: -1 });
                                $.cookie("gmSysUserName", "", { expires: -1 });
                            }
                            window.location.href="user/index.web";
                        }else{
                            $('#errorInfo').html(res.error);
                        }
                    }

                });
    });
</script>
</body>
</html>
